<template>
  <div>
    <el-scrollbar>
      <div ref="stepRef" class="steps">
        <div v-for="(item, index) in labelLsit" :key="index" class="steps-itme">
          <div class="normalItem" :class="[{ active: status === item.status }, 'is-' + item.processStatus]" @click="change(item, index)">
            <div class="steps_circle__index" :style="{ backgroundColor: item.color }">
              <span v-show="!(loading && chooseValue === item.value)">{{ index + 1 }}</span>
              <span class="el-icon-loading" v-show="loading && chooseValue === item.value"></span>
            </div>
            <el-tooltip v-if="item.tip" :content="item.tip">
              <span class="steps__name" :style="{ color: item.color }">
                {{ item.label }}
              </span>
            </el-tooltip>
            <span v-else class="steps__name" :style="{ color: item.color }">
              {{ item.label }}
            </span>
            <svg-icon class="el-icon-right" icon-class="toright" />
          </div>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>

<script>
import findIndex from 'lodash/findIndex'
import request from '@/utils/request.js'
export default {
  props: { 
    label: {
      type: Array,
      default: () => {
        return []
      }
    },
    // 当前状态
    status: {
      type: String | Number,
      default: null
    },
    // 接口地址
    nodeUrl: {
      type: String,
      default: ''
    },
    postMethod: {
      type: String,
      default: 'post'
    },
    disable: {
      type: Boolean,
      default: false
    },
    // 自定义状态匹配 eg: match: ['PENDINGED', 'INIT']
    // 符合match里面的值，找到第一位符合下标
    match: {
      type: Boolean,
      default: false
    },
    // 禁止回滚的状态
    disableStuts: {
      type: Array,
      default: () => {
        return ['PENDINGED']
      }
    },
    // 禁止触发事件的状态
    disableEvents: {
      type: Array,
      default: () => {
        return []
      }
    },
    // 允许回滚状态
    allowStuts: {
      type: [Array, Boolean],
      default: () => {
        return true
      }
    }
  },
  data() {
    return {
      v_index: 0,
      chooseValue: null,
      labelLsit: [],
      statusObj: {
        pass: '#409EFF',
        success: '#19972d',
        error: '#666666',
        danger: '#FF0000'
      },
      loading: false
    }
  },
  watch: {
    status: {
      handler() {
        this.init()
      },
      immediate: true
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    change(v) {
      // 加载中
      if (this.loading) return
      // 只触发事件
      if (this.disableEvents.includes(v.status)) {
        this.$emit('clickStatus', v)
        return
      }
      // 禁用
      if (this.disable) return
      // 同状态
      if (this.status === v.status) return

      const isBackNum = this.labelLsit.find(a => a.status === this.status).value
      this.chooseValue = v.value
      const stateContent = v.value < isBackNum ? '回退' : '更改状态'
      const params = v.data
      if (stateContent === '回退' && this.disableStuts.includes(this.status)) {
        return
      }
      this.handleNodeBack(params, stateContent)
    },
    // 回退节点
    handleNodeBack(obj, content) {
      this.$confirm(`此操作将${content}, 是否继续?`, this.$t('common.reminder'), {
        confirmButtonText: this.$t('common.confirm'),
        cancelButtonText: this.$t('common.cancel'),
        type: 'warning'
      })
        .then(() => {
          this.loading = true
          this.requestApi(obj)
            .then(r => {
              this.$message.success('操作成功')
              this.$emit('refresh')
              setTimeout(() => {
                this.loading = false
              }, 1000)
            })
            .catch(e => {
              this.loading = false
            })
        })
        .catch(() => {})
    },
    requestApi(data) {
      return request({
        url: this.nodeUrl,
        method: this.postMethod,
        data
      })
    },
    init() {
      this.labelLsit = this.label
      var ary = this.label
      if (this.match) {
        this.v_index = this.labelLsit.findIndex(f => {
          return (f.match || []).includes(this.status)
        })
      } else {
        this.v_index = findIndex(this.labelLsit, { status: this.status })
      }
      for (let i = 0; i < ary.length; i++) {
        if (i <= this.v_index) {
          ary[i].color = this.statusObj[ary[i].processStatus] || '#409EFF'
        } else {
          ary[i].color = ''
        }
      }
      // try {
      //   console.log(this.$refs.stepRef.clientWidth)
      // } catch (error) {}
    }
  }
}
</script>

<style lang="scss" scoped>
$blue: #409EFF;
$green: #19972d;
$red: #d80000;
.steps {
  display: inline-block;
  position: relative;
  white-space: nowrap;
  // width: 2000px;
  .steps-itme {
     display: inline-block;
    text-align: center;
    z-index: 2;
    background-color: #fff;
    padding-right: 4px;
    .normalItem {
      cursor: pointer;
      opacity: 0.8;
      position: relative;
      .steps_circle__index {
        display: inline-block;
        border-radius: 100%;
        border: 0;
        width: 18px;
        height: 18px;
        line-height: 18px;
        color: #fff;
        background: #cccccc;
        font-size: 12px;
      }
      .steps__name {
        margin-left: 6px;
      }
      &:hover {
        opacity: 1;
      }
    }
    .is-pass:hover {
      .steps__name {
        color: $blue;
      }
      .steps_circle__index {
        background-color: $blue;
      }
    }
    .is-success:hover {
      .steps__name {
        color: $green;
      }
      .steps_circle__index {
        background-color: $green;
      }
    }
    .is-error:hover {
      .steps__name {
        color: $red;
      }
      .steps_circle__index {
        background-color: $red;
      }
    }
    .mfont {
      position: absolute;
      right: -60px;
      top: 0;
    }
    .el-icon-right {
      margin: 0 10px;
      color: #cccccc;
    }
    &:last-child {
      .el-icon-right {
        display: none;
      }
    }
  }
}
</style>
